/*
 * @Description: 接收登记列表
 * @Author: Rfan
 * @Date: 2022-11-23 17:50:05
 * @LastEditTime: 2023-01-29 15:36:39
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space, Table } from 'antd';
import classNames from 'classnames/bind';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useAccessionContext } from '../contexts/AccessionContext';
import EditAccessionDialog from './dialogs/EditAccessionDialog';
import type { IPageQuery } from '@/interfaces/global';
import type { IRegAccessionItem } from '@/interfaces/registration';
import type { IRegAccessionListParams } from '@/api/registration/accession';
import styles from '../styles/pageList.module.scss';
import { formatDate } from '@/utils';

const cx = classNames.bind(styles);
const { Column } = Table;

const PageList = (props: any) => {
  const { className } = props;
  const { list, selectItems, setSelectKey, getRegAccessionList, deleteItem } =
    useAccessionContext();
  const formatMessage = useFormatMessage();

  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery<IRegAccessionListParams>>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  // 加入鉴定批次弹窗可视状态
  const [editVisible, setEditVisible] = useState(false);
  // 选中内容
  const [selectData, setSelectData] = useState<IRegAccessionItem>(null);

  useEffect(() => {
    if (listQuery && listQuery.param) {
      setLoading(true);
      getRegAccessionList(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const editItem = (item: any) => {
    setSelectData(item);
    setEditVisible(true);
  };

  return (
    <div className={className}>
      <Table
        dataSource={list}
        loading={loading}
        rowKey="id"
        scroll={{ x: 'max-content' }}
        bordered
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column
          title="登记时间"
          dataIndex="registrationTime"
          key="registrationTime"
          align="center"
          render={(text) => <span>{formatDate(text)}</span>}
        />
        <Column title="全宗号" dataIndex="fondsNo" key="fondsNo" align="center" />
        <Column title="年度" dataIndex="year" key="year" align="center" />
        <Column title="批次" dataIndex="receiveBatchId" key="receiveBatchId" />
        <Column title="档案类型" dataIndex="archiveTypeName" key="archiveTypeName" />
        <Column
          title="交接方式"
          dataIndex="receiveMode"
          key="receiveMode"
          render={(text) => (text === 1 ? '在线' : text === 2 ? '离线' : '')}
        />
        <Column title="案卷总数" dataIndex="folderCount" key="folderCount" />
        <Column title="文件总数" dataIndex="fileCount" key="fileCount" />
        <Column title="电子文件数量" dataIndex="efileCount" key="efileCount" />
        <Column title="移交数据容量" dataIndex="transferDataSize" key="transferDataSize" />
        <Column title="移交载体类型" dataIndex="transferVectorType" key="transferVectorType" />
        <Column title="接收单位" dataIndex="receiveUnit" key="receiveUnit" />
        <Column title="规范性检测ID" dataIndex="detectionJobId" key="detectionJobId" />
        <Column title="检测人" dataIndex="title" key="title" />
        <Column title="载体外观检查" dataIndex="title" key="title" />
        <Column
          title="检测结果"
          dataIndex="detectionResult"
          key="detectionResult"
          render={(text) => (text ? '失败' : '成功')}
        />
        <Column title="填表人" dataIndex="registrant" key="registrant" />
        <Column title="审核人" dataIndex="title" key="title" />
        <Column title="其它描述" dataIndex="remark" key="remark" />
        <Column
          title={formatMessage('tableAction')}
          key="action"
          className={cx('action-col')}
          align="center"
          render={(_text, record: any) => (
            <Space>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  editItem(record);
                }}
              >
                编辑
              </Button>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  deleteItem(record.id);
                }}
              >
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () =>
          selectData && (
            <EditAccessionDialog
              visible={editVisible}
              data={selectData}
              onClose={() => {
                setEditVisible(false);
              }}
            />
          ),
        [editVisible]
      )}
    </div>
  );
};

export default PageList;
